<!--
 * @Author 王坤
 * @LastEditors: 王坤
 * @Description: 树形控件
-->
<template>
  <div class="lc-tree">
    <el-tree
      ref="lcTreeRef"
      :data="treeData"
      :props="config.defaultProps"
      :show-checkbox="config.showCheckbox"
      :default-expand-all="config.expandAll"
      :node-key="config.nodeKey"
      @check="handleTreeCheckChange"
    />
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
const props = defineProps({
  modelValue: {
    type: [Array],
    default: (_) => []
  },
  treeData: {
    type: [Array],
    default: (_) => []
  },
  config: {
    type: [Object],
    default: (_) => {}
  }
});
const emits = defineEmits(['update:modelValue', 'handleCheckChange']);
const lcTreeRef = ref();
onMounted(() => {
  watch(
    () => props.modelValue,
    (val) => {
      if (Array.isArray(val)) {
        lcTreeRef.value?.setCheckedKeys(val);
      }
    },
    { immediate: true }
  );
});

function handleTreeCheckChange(_, tree) {
  emits('update:modelValue', tree.checkedKeys);
  emits('handleCheckChange', tree.checkedKeys);
}
</script>
